// 搜索记录框

var searchB = document.querySelector('.text-searcId');
var inputSearc = document.querySelector('.text-input-searc');
var record = document.querySelector('.record');
var search = document.querySelector('.a-search');
var searchBorder = document.querySelector('.search-border');

searchBorder.addEventListener('click', function () {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
});

inputSearc.addEventListener('focus', function () {
    if (searchB.offsetHeight > 26) {
        searchB.style.visibility = 'visible';
    }
    var delDiv = document.getElementsByClassName('del-div');
    for (var i = 0; i < delDiv.length; i++) {
        delDiv[i].addEventListener('mouseover', function () {
            var element = this;
            this.style.backgroundColor = 'orange';
            this.children[0].innerText = '删除';
            this.children[0].addEventListener('click', function () {
                element.innerText = '';
                if (searchB.offsetHeight == 26) {
                    searchB.style.visibility = 'hidden';
                }
            });
        });

        delDiv[i].addEventListener('mouseout', function () {
            var element = this;
            this.style.backgroundColor = '#ffffff';
            this.children[0].innerText = '搜索历史';
        });

    }
});

document.body.addEventListener('click', function () {
    searchB.style.visibility = 'hidden';
});


search.addEventListener('click', function () {
    if (inputSearc.value) {
        var creDiv = document.createElement('div');
        creDiv.setAttribute('class', 'text-mfont del-div');
        creDiv.style.lineHeight = '25px';
        creDiv.innerText = inputSearc.value;
        var creaSpan = document.createElement('span')
        creaSpan.innerText = '搜索历史';
        creaSpan.setAttribute('class', 'text-red pos-rigth')
        creDiv.appendChild(creaSpan);
        record.appendChild(creDiv);
    }
});

var delAll = document.querySelector('.del-all');
delAll.addEventListener('click', function () {
    record.innerText = '';
    searchB.style.visibility = 'hidden';
});

// 京东秒杀倒计时
var seckill = document.querySelectorAll('.seckill-logotime')


var timer = setInterval(function () {
    if (parseInt(seckill[2].innerText) <= 0) {
        seckill[2].innerText = 60;
        if (parseInt(seckill[1].innerText) <= 0) {
            seckill[1].innerText = 60;
            seckill[0].innerText = parseInt(seckill[0].innerText) - 1;
            if (parseInt(seckill[0].innerText) <= 0) {
                seckill[0].innerText = 0;
            }
        }
        seckill[1].innerText = parseInt(seckill[1].innerText) - 1;
    }
    seckill[2].innerText = parseInt(seckill[2].innerText) - 1;
    if (parseInt(seckill[2].innerText) === 0
        && parseInt(seckill[1].innerText) === 0
        && parseInt(seckill[0].innerText) === 0) {
        clearInterval(timer);
    }

}, 1000);


//悬浮出div
var hoverDiv = document.querySelector('#content>.content-left .li-left .over-div');
var liLeft = document.querySelectorAll('#content>.content-left .li-left');
for (var i = 0; i < liLeft.length; i++) {
    liLeft[i].addEventListener('mouseenter', function () {
        this.style.backgroundColor = '#e3e4e5';
        this.appendChild(hoverDiv);
        hoverDiv.style.display = 'block';
    });

    liLeft[i].addEventListener('mouseleave', function () {
        this.children[this.children.length - 1].remove();
        this.style.backgroundColor = '#FFFFFF'
    });
}


// 轮播图
var img = document.querySelectorAll('.slideshow-img>img');
var divLeft = document.querySelector('.click>.left');
var divRight = document.querySelector('.click>.right');
var activeLi = document.querySelectorAll('.active .active-li')
var t = img.length - 1;

divLeft.addEventListener('click', function () {
    divleft()
});


divright()
divRight.addEventListener('click', function () {
    divright();
});

setInterval(function () {
    divright()
}, 3000)

function divleft() {
    if (t === 0) {
        activeLi[t].className = 'active-li';
        for (var i = 0; i < img.length; i++) {
            img[i].style.opacity = '1';
        }
        t = img.length - 1;
        activeLi[t].className = 'active-li active-li-hover';
    } else {
        img[t].style.opacity = '0';
        img[t].style.transition = 'opacity 500ms ease-in-out 0s';
        activeLi[t].className = 'active-li';
        t -= 1;
        activeLi[t].className = 'active-li active-li-hover';
    }
}

function divright() {
    activeLi[t].className = 'active-li';
    t += 1;
    if (t === img.length) {
        t = 0;
        activeLi[t].className = 'active-li active-li-hover';
        img[t].style.opacity = '1';
        img[t].style.transition = 'opacity 1000ms ease-in-out 0s';
        for (var i = 1; i < img.length; i++) {
            img[i].style.opacity = '0';
            img[i].style.transition = 'opacity 1000ms ease-in-out 0s';
        }
    } else {
        activeLi[t].className = 'active-li active-li-hover';
        img[t].style.opacity = '1';
        img[t].style.transition = 'opacity 1000ms ease-in-out 0s';
    }
}

for (var i = 0; i < activeLi.length; i++) {
    activeLi[i].addEventListener('mouseover', (function (x) {
        return function () {
            activeLi[t].className = 'active-li';
            this.className = 'active-li active-li-hover';
            for (var i = 0; i < img.length; i++) {
                img[i].style.opacity = '0';
                img[i].style.transition = 'opacity 500ms ease-in-out 0s';
            }
            img[x].style.opacity = '1';
            t = x;
        };
    })(i));
}

// 搜索框固定定位
function getscroll() {
    return {
        left: window.pageXoffset
            || document.documentElement.scrollLeft
            || document.body.scrollLeft
            || 0,
        top: window.pageYOffset
            || document.documentElement.scrollTop
            || document.body.scrollTop
            || 0
    }
}

var headerThree = document.querySelector('.header-three');
var contentMargin = document.querySelector('#content')
window.addEventListener('scroll', function () {
    if (getscroll().top >= 110) {
        headerThree.setAttribute('class', 'header-three header-fixed clearfix');
        contentMargin.style.marginTop = '150px'
    } else {
        headerThree.setAttribute('class', 'header-three clearfix');
        contentMargin.style.marginTop = '11px'
    }
});





